<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">遮盖物</el-menu-item>
    <el-sub-menu index="2">
      <template #title>风格</template>
      <el-menu-item index="2-1" @click="addPoint">点位</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>地图底色</template>
        <el-menu-item
          v-for="(item, index) in colorList"
          :index="`2-4-${index + 1}`"
          :key="index"
          @click="changeTheme(item)"
          >{{ item.name }}</el-menu-item
        >
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
  <div id="gdMap"></div>
</template>

<script setup>
import pointImg from "../../assets/point.png";
import AMapLoader from "@amap/amap-jsapi-loader";
import { nextTick, onMounted, ref } from "vue";
const activeIndex = ref("0");
const map = ref(null);
const point = ref(null);
const infoWindow = ref(null);
const theme = ref("amap://styles/68d9b98357f22e70b58e68305d2dd149");
const colorList = ref([
  { name: "标准", val: "amap://styles/normal" },
  { name: "幻影黑", val: "amap://styles/dark" },
  { name: "月光银", val: "amap://styles/light" },
  { name: "远山黛", val: "amap://styles/whitesmoke" },
  { name: "草色青", val: "amap://styles/fresh" },
  { name: "雅士灰", val: "amap://styles/grey" },
  { name: "涂鸦", val: "amap://styles/graffiti" },
  { name: "马卡龙", val: "amap://styles/macaron" },
  { name: "靛青蓝", val: "amap://styles/blue" },
  { name: "极夜蓝", val: "amap://styles/darkblue" },
  { name: "酱籽", val: "amap://styles/wine" },
]);
const pointList = ref([
  {
    address: [
      {
        name: "浙江省丽水市遂昌县妙高街道叶坦新村",
        value: { lat: 28.60336, lng: 119.27595 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道后岭东南约189米",
        value: { lat: 28.60694, lng: 119.26869 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道瓦窑岗西北约95米",
        value: { lat: 28.61016, lng: 119.25773 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道北勤西南约339米",
        value: { lat: 28.59619, lng: 119.26286 },
      },
    ],
    id: "449571271313981441",
    projectName: "测试多个点位1",
    projectProcess: "90",
  },
  {
    address: [
      {
        name: "浙江省丽水市莲都区紫金街道兰亭2幢",
        value: { lat: 28.454, lng: 119.91775 },
      },
      {
        name: "浙江省丽水市莲都区紫金街道丽青路123-11号",
        value: { lat: 28.45644, lng: 119.91848 },
      },
    ],
    id: "449571313081909249",
    projectName: "优先发展教育",
    projectProcess: "100",
  },
  {
    address: [
      {
        name: "浙江省丽水市遂昌县妙高街道前山社区牡丹亭西路1弄18号安居新村1幢西南约195米",
        value: { lat: 28.60321, lng: 119.26792 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道大平岗西北约215米",
        value: { lat: 28.59303, lng: 119.28354 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道妙高山东北约451米",
        value: { lat: 28.59454, lng: 119.2614 },
      },
      {
        name: "浙江省丽水市遂昌县妙高街道下南门路80正西方向156米",
        value: { lat: 28.58866, lng: 119.27573 },
      },
    ],
    id: "449571874779168769",
    projectName: "新建小学",
    projectProcess: "100",
  },
  {
    address: [
      {
        name: "浙江省丽水市莲都区紫金街道解放街229",
        value: { lat: 28.451, lng: 119.91854 },
      },
      {
        name: "浙江省丽水市莲都区万象街道大洋路与解放街交叉路口正南方向49米",
        value: { lat: 28.4499, lng: 119.91539 },
      },
      {
        name: "浙江省丽水市莲都区万象街道大众路32号正南方向40米",
        value: { lat: 28.44988, lng: 119.91172 },
      },
    ],
    id: "449571891685883905",
    projectName: "新建医院",
    projectProcess: "100",
  },
  {
    address: [
      {
        name: "浙江省丽水市莲都区紫金街道花园新村",
        value: { lat: 28.45329, lng: 119.92023 },
      },
      {
        name: "浙江省丽水市莲都区紫金街道永晖新村224幢",
        value: { lat: 28.45173, lng: 119.91633 },
      },
      {
        name: "浙江省丽水市莲都区紫金街道解放街288号东北方向40米",
        value: { lat: 28.44975, lng: 119.91753 },
      },
      {
        name: "浙江省丽水市莲都区紫金街道银苑小区115幢",
        value: { lat: 28.44741, lng: 119.92049 },
      },
      {
        name: "浙江省丽水市莲都区紫金街道金苑新村5幢",
        value: { lat: 28.4512, lng: 119.92225 },
      },
    ],
    id: "449571904004554753",
    projectName: "新建公司",
    projectProcess: "90",
  },
]);

onMounted(() => {
  nextTick(() => {
    initMap();
  });
});
function changeTheme(item) {
  theme.value = item.val;
  initMap();
}
function addPoint() {
  // 创建一个 Icon
}
function initMap() {
  AMapLoader.load({
    key: "2e6b700e23776a4d433e87fb53fa8e27", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  }).then((AMap) => {
    map.value = new AMap.Map("gdMap", {
      //设置地图容器id
      viewMode: "2D", //是否为3D地图模式
      zoom: [16], //初始化地图级别
      mapStyle: theme.value,
      showLabel: false,
      features: ["bg", "road", "point"],
      center: [119.91284, 28.44594], //初始化地图中心点位置
    });
    infoWindow.value = new AMap.InfoWindow({
      // isCustom: true,
      // content: createInfoWindow(title, content.join("<br/>")),
      offset: new AMap.Pixel(0, -30),
    });
    pointList.value.forEach((e) => {
      if (e.address?.length) {
        e.address.forEach((p) => {
          let marker = new AMap.Marker({
            icon: pointImg,
            position: [p.value.lng, p.value.lat],
            offset: new AMap.Pixel(-13, -30),
          });
          marker.content = p.name;
          marker.on("click", markerClick);
          marker.emit("click", { target: marker });
          marker.setMap(map.value);
        });
      }
    });
  });
}
function markerClick(e) {
  infoWindow.value.setContent(e.target.content);
  infoWindow.value.open(map.value, e.target.getPosition());
}
//构建自定义信息窗体
// function createInfoWindow() {
//     var info = document.createElement("div");
//     info.className = "custom-info";

//     //可以通过下面的方式修改自定义窗体的宽高
//     info.style.width = "400px";
//     // 定义顶部标题
//     var top = document.createElement("div");
//     var titleD = document.createElement("div");
//     var closeX = document.createElement("img");
//     top.className = "info-top";
//     titleD.innerHTML = title;
//     closeX.src = "https://webapi.amap.com/images/close2.gif";
//     closeX.onclick = closeInfoWindow;

//     top.appendChild(titleD);
//     top.appendChild(closeX);
//     info.appendChild(top);

//     return info;
// }
//关闭信息窗体
// function closeInfoWindow() {
//     map.value.clearInfoWindow();
// }
</script>

<style scoped>
#gdMap {
  width: 100vw;
  height: 100vh;
}
.custom-info {
  background-color: antiquewhite;
}
</style>